<script setup lang="ts">
import { footer } from "@/assets/language/debug-text";
import lookengLogo from '@/assets/footer-img/lookeng-logo.png';
import wechartLogo from '@/assets/footer-img/wechart.png';
import wechartLogoHover from '@/assets/footer-img/wechart-hover.png';
import bilibiliLogo from '@/assets/footer-img/bilibili.png';
import bilibiliLogoHover from '@/assets/footer-img/bilibili-hover.png';
import wechat_img from '@/assets/footer-img/qrcode.png';
import wechat_QR from '@/assets/footer-img/qrcode1.png';

</script>

<template>
  <div class="footer wrapper">
    <div class="footer-logo">
      <img :src="lookengLogo" alt="" />
      <p>
        <a class="email" :href="'mailto:' + footer.email" target="_blank">{{
          footer.email
        }}</a>
      </p>
    </div>
    <div class="footer-option">
      <div class="footer-option-item">
        <a
          v-for="item in footer.footerOptions"
          :key="item.id"
          :href="item.link"
          class="link"
          >{{ item.label }}</a
        >
      </div>
      <p class="agreement">
        {{ footer.follow
        }}<a class="link" :href="footer.apacheVersionLink" target="_blank">{{
          footer.apacheVersion
        }}</a
        >{{ footer.agreement }}
      </p>
      <p class="copyright">{{ footer.copyright }}</p>
    </div>
    <div class="footer-right">
      <p class="text">{{ footer.code_text }}</p>
      <div class="footer-code">
        <div class="code-box">
          <img :src="wechartLogo" class="img" alt="" />
          <img :src="wechartLogoHover" class="img-hover" alt="" />
          <div class="code-box-hover">
            <span class="hover-item">
              <img :src="wechat_img" alt="" />
              <p class="code-box-txt">{{ footer.wechart }}</p>
            </span>
            <span class="hover-item">
              <img :src="wechat_QR" alt="" />
              <p class="code-box-txt">{{ footer.community }}</p>
            </span>
          </div>
        </div>
        <div class="code-box">
          <a :href="footer.bilibiliLive" target="_blank">
            <img :src="bilibiliLogo" class="img" alt="" />
            <img :src="bilibiliLogoHover" class="img-hover" alt="" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.footer {
  max-width: 1416px;
  margin: 0 auto;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-logo img {
    height: 24px;
    margin-bottom: 38px;
  }

  .copyright {
    font-size: 12px;
    color: #999999;
    margin-top: 10px;
  }
  .agreement {
    color: #999999;
    font-size: 12px;
    a {
      color: #ffffff;
    }
  }
  .footer-option {
    text-align: center;
    &-item {
      margin-bottom: 12px;
    }
    .link {
      color: #ffffff;
      font-size: 14px;
      display: inline-block;
      padding: 0 12px;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      &:last-child {
        border-right: 0;
      }
    }
  }
  .footer-right {
    .text {
      font-size: 14px;
      color: #999999;
      margin-bottom: 16px;
    }
    .footer-code {
      display: grid;
      position: relative;
      grid-template-columns: 40px 40px;
      gap: 40px;

      .code-box {
        width: 40px;
        height: 40px;
        margin-right: 40px;
        position: relative;
        .img,
        .img-hover {
          width: 100%;
        }
        .img-hover {
          display: none;
        }
        &:hover {
          .img {
            display: none;
          }
          .img-hover {
            display: block;
          }
          .code-box-hover {
            opacity: 1;
            visibility: visible;
          }
        }
        &-hover {
          background: #ffffff;
          position: absolute;
          top: -120px;
          left: 50%;
          padding: 8px;
          display: grid;
          gap: 24px;
          grid-template-columns: auto auto;
          transform: translateX(-50%);
          opacity: 0;
          width: 200px;
          transition: all 0.3s ease-in;
          visibility: hidden;
          &:after {
            content: '';
            border: 8px solid transparent;
            border-top-color: #ffffff;
            transform: translateX(-50%);
            display: block;
            position: absolute;
            bottom: -16px;
            left: 50%;
          }
          img {
            width: 80px;
            height: 80px;
          }
          .code-box-txt {
            font-size: 12px;
            color: #000000;
            text-align: center;
          }
        }
      }
    }
  }

  .link,
  .email {
    color: #ffffff;
    font-size: 12px;
  }
}

@media (max-width: 1100px) {
  .footer {
    padding: 16px;
    display: grid;
    justify-content: center;
    width: 100%;
    &-logo {
      display: none;
    }
    &-right {
      order: -1;
      width: 100%;
      text-align: center;
      padding-bottom: 24px;
      .footer-code {
        justify-content: center;
      }
    }
  }
}
</style>
